<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权限表</title>
    <!--引入vue.js库-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="/js/vue.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 36px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 36px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 36px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 36px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 36px;
        }
    </style>
</head>
<body>

<!--vue必须绑定根标签-->
<div id="app">
    <el-button type="primary"  @click="refresh">刷新</el-button>
    <el-container>
        <el-aside width="200px">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </el-aside>
        <el-main>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="权限名称">
                    <el-input v-model="form.label"></el-input>
                </el-form-item>
                <el-form-item label="父节点">
                    <!--设置一个有隐藏的父ID，用于传参-->
                    <input type="hidden" name="form.parentId">
                    <el-input v-model="form.parentId" @focus="dialogMenuTreeVisible=true"></el-input>
                </el-form-item>
                <el-form-item label="权限url">
                    <el-input v-model="form.url"></el-input>
                </el-form-item>
                <el-form-item label="权限图标">
                    <el-input v-model="form.icon"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">{{btnName}}</el-button>
                    <el-button type="danger" v-if="isShow" @click="onDel">删除</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>

    <el-dialog title="权限树" :visible.sync="dialogMenuTreeVisible">
        <el-tree :data="data"
                 :props="defaultProps"
                 show-checkbox
                 check-strictly="true"
                 ref="parentMenuTree"
                 default-expand-all
        ></el-tree>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="checkSelectNode">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    //js代码
    var vue = new Vue({
        el: "#app",
        data() { //存放使用的所有属性数据
            return { //方便编写表单校验
                form: {label:'',parentId:'',url:'',icon:''},//form表单对象
                data: [], //tree数据
                defaultProps: {//传参属性
                    children: 'children',
                    label: 'label'
                },
                btnName: '添加',//按钮名称
                isShow: false,//默认不显示删除
                dialogMenuTreeVisible: false,//弹出层，默认不显示
            }
        },
        created: function () {//页面初始化时，需要执行的业务可以放入该方法
            //调用加载数据方法
            this.loadData();
        },
        methods: { //存放所有使用的方法（函数）
            //封装请求数据的方法
            loadData() {
                //定义变量_this=tshi
                var _this = this;
                //axios向后台发请求
                axios.get('/menu/queryTreeData')//请求参数  json格式
                    .then(function (response) {//回调函数
                        //前端控制台打印  response 是json对象
                        console.log(response);
                        console.log(JSON.stringify(response));
                        //response获取后台数据时，一定加data  response.data相当于从响应的body中获取
                        if (response.data.code == 200) {
                            //这里面直接写this相当于axios对象 不是vue
                            // this.tableData = response.data.data.list; //错误的
                            _this.data = response.data.data;
                            console.log(_this.data);
                        }
                    })
                    .catch(function (error) {//异常处理
                        console.log(error);
                    });
            },
            //绑定点击事件
            handleNodeClick(data) {
                console.log(data);
                alert(JSON.stringify(data));
                console.log(JSON.stringify(data));
                if (data.url != null && data.url != '' && data.url != 'null' && data.url != 'undefined') {
                    //当点击左侧菜单时，添加页签
                    this.addTab(data.label, data.url);
                }

            },
            //定义所有元素绑定的方法
            //绑定点击事件
            handleNodeClick(data) {
                console.log(JSON.stringify(data));
                //把当前节点json数据赋值给form
                this.form = data;
                this.btnName = "修改";
                this.isShow = true;
            },
            //更新或者添加提交
            onSubmit() {
                var url = '/menu/add';
                if (this.btnName == '修改') {
                    url = '/menu/update';
                }
                //alert(JSON.stringify(this.form));
                var _this = this;
                axios.post(url,this.form)  //指定请求的url及参数  get
                    .then(function (response) {  //正确返回对象的处理
                        //JSON.stringify   把json转换为json字符串，方便查看
                        console.log(JSON.stringify(response));
                        //alert(JSON.stringify(data));
                        //直接使用this 会指 axios对象  错误
                        // this.tableData
                        //判断返回值是否正确
                        //alert(response.data.code);
                        if (response.data.code == 200) {
                            //提示添加成功
                            _this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                            //刷新整个页面
                            location.reload();
                        } else {
                            //错误提示信息
                            _this.$message.error('错了哦，这是一条错误消息');
                        }
                    })
            },
            //删除
            onDel() {
                //判断是否是子节点
                if (this.form.url == '' || this.form.url == null) {
                    this.$message.error('该节点下还有子节点，不能删除！！！');
                    return;
                }
                //确认框提示
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    //让_this等于当前vue对象
                    var _this = this;
                    /*alert(JSON.stringify(this.form));
                    alert(JSON.stringify(this.form.id))*/
                    // alert(111);
                    //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
                    axios.delete("/menu/deleteById?id=" + _this.form.id)  //指定请求的url及参数  get
                        .then(function (response) {  //正确返回对象的处理
                            //JSON.stringify   把json转换为json字符串，方便查看
                            console.log(JSON.stringify(response));
                            //直接使用this 会指 axios对象  错误
                            //判断返回值是否正确
                            //alert(response.data.code);
                            if (response.data.code == 200) {
                                //提示添加成功
                                _this.$message({
                                    message: '恭喜你，这是一条删除成功！',
                                    type: 'success'
                                });
                                //删除整个页面
                                location.reload();
                            } else {
                                //错误提示信息
                                _this.$message.error('删除失败！');
                            }

                        })
                        .catch(function (error) {//错误的处理
                            // handle error
                            console.log(error);
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //刷新事件
            refresh() {
                location.reload();
            },
            //校验选中节点数量
            checkSelectNode() {
                let nodes = this.$refs.parentMenuTree.getCheckedNodes();
                if (nodes.length > 1) {
                    this.$message.error("只能选择一个节点。。。");
                    return;
                }
                console.log("一个节点：" + JSON.stringify(nodes) + "名称为：" + nodes[0].label);
                this.form.parentName = nodes[0].label;
                this.form.parentId = nodes[0].id;
                //关闭弹框
                this.dialogMenuTreeVisible = false;
                console.log("选中节点：" + JSON.stringify(this.form));
            }
        }

    })
</script>


</body>
</html>